// 选择课程-班级-班级人数
<template>
  <div class="select-cource-class flex-row">
    <el-select v-model="courseValue" @change="changeCourse" placeholder="请选择">
      <el-option
        v-for="item in courseOptions"
        :key="item.value"
        :label="item.classResourceLessonName"
        :value="item.resourceLessonId">
      </el-option>
    </el-select>
    <!-- <div class="right-content flex-row" v-if="isShowClass">
      <div class="select-class">
        班级：
        <el-select v-if="isSelectClass" v-model="classValue" placeholder="请选择">
          <el-option
            v-for="item in classOptions"
            :key="item.value"
            :label="item.resourceLessonName"
            :value="item.resourceLessonId">
          </el-option>
        </el-select>
          <span v-else>{{ className }}</span>
        </div>
        <div>
          学生： {{ classNum }}人
        </div>
    </div> -->
  </div>
</template>

<script>
import { getClassResource } from '@/api/overall'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      courseValue: '英语视听说',
      courseOptions: [],
      classValue: '',
      classOptions: []
    }
  },
  props: {
    // 显示班级信息
    isShowClass: {
      type: Boolean,
      default: true
    },
    // 班级是否可选
    isSelectClass: {
      type: Boolean,
      default: false
    },
    // 班级人数
    classNum: {
      type: Number,
      default: 0
    }
  },
  components: {},
  created () {
    this.getClassResource()
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  },
  watch: {},
  methods: {
    async getClassResource () {
      const res = await getClassResource()
      if (res.code === '200') {
        this.courseOptions = res.data
        // console.log(this.courseOptions)
      } else {
        this.$message.error(res.message)
      }
    },
    changeCourse (item) {
      console.log(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-cource-class {
  padding-bottom: 20px;
  border-bottom:1px solid rgba(229,229,229,1);
  div {
     color:rgba(16,29,55,1);
  font-size: 16px;
  }
  .right-content {
    .select-class {
      margin-right: 30px;
    }
  }
}
</style>
